<template>
  <el-dialog v-model="dialogVisible" title="添加签到" width="500px" :close-on-click-modal="false" :show-close="true"
    @close="handleClose" class="sign-in-form">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" class="quick-answer-form"
      label-position="left">
      <el-form-item label="活动名称" prop="name" required>
        <el-input v-model="signName" placeholder="请输入活动名称" maxlength="20" show-word-limit />
      </el-form-item>

      <el-form-item label="结束方式" required>
        <el-radio-group v-model="defaultEndTime">
          <el-radio :label="2">2分钟</el-radio>
          <el-radio :label="5">5分钟</el-radio>
          <el-radio :label="10">10分钟</el-radio>
          <el-radio :label="0">手动关闭</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">立即开始</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 可以用来获取在当前组件标签上定义的属性（props）
// 这些属性是从父组件传递到子组件的。
const props = defineProps({
  classroomId: {
    type: [String, Number],
    required: true
  },
  teacherId: {
    type: [String, Number],
    required: true
  },
  sendMessage: {
    type: Function
  }
})

// 默认签到名称
const getDefaultSignName = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  return `签到 ${year}/${month}/${day}`
}
// 签到活动名称
const signName = ref(getDefaultSignName())

// 签到默认时间
const defaultEndTime = ref(2);

// 父组件
const emit = defineEmits(['close', 'submit'])

const dialogVisible = ref(true)
const formRef = ref(null)

const form = ref({
  name: signName.value,
  endType: defaultEndTime.value
})

const rules = {
  name: [
    { required: true, message: '请输入活动名称', trigger: 'blur' },
    { max: 20, message: '长度不能超过20个字符', trigger: 'blur' }
  ]
}

const handleClose = () => {
  emit('close')
}

const handleSubmit = async () => {
  if (!formRef.value) return

  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        props.sendMessage({
          type: 'SIGN_IN_SYNC',
          data: {
            signName: signName.value,
            signTime: form.value.endType,
            classroomId: props.classroomId,
            teacherId: props.teacherId
          }
        })

        ElMessage.success('创建成功')
        handleClose();
      } catch (error) {
        console.error('创建签到失败:', error)
        ElMessage.error('创建签到失败，请重试')
      }
    }
  })
}
</script>

<style scoped>
.sign-in-form {
  :deep(.el-dialog) {
    background-color: white;
    border-radius: 8px;
  }

  :deep(.el-dialog__header) {
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
  }

  :deep(.el-dialog__body) {
    padding: 20px;
  }

  :deep(.el-form-item__label) {
    font-weight: normal;
    justify-content: flex-start;
  }

  :deep(.el-form--label-left .el-form-item__label) {
    text-align: left;
  }

  :deep(.el-form-item__label::before) {
    color: #ff4949;
  }

  :deep(.el-input__wrapper) {
    background-color: white;
  }

  :deep(.el-radio) {
    margin-right: 20px;
    margin-bottom: 8px;
  }

  :deep(.el-radio__label) {
    font-weight: normal;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 20px;
  border-top: 1px solid #eee;
}
</style>